<template>
  <div>
    <swiper :lists="indexBannerList"/>

    <div class="item">
      <h5 class="title">
        <div>热门</div>
        <van-icon name="arrow" />
      </h5>
      <video-list :lists="indexHotList"/>
    </div>
    <div class="item">
      <h5 class="title">
        <div>电影</div>
        <van-icon name="arrow" />
      </h5>
      <video-list :lists="indexMovieList"/>
    </div>
    <div class="item">
      <h5 class="title">
        <div>电视剧</div>
        <van-icon name="arrow" />
      </h5>
      <video-list :lists="indexTelevisionList"/>
    </div>
  </div>
</template>

<script>
import indexApi from "@/api/home/indexFont";
import Swiper from '@/components/swiper/index'
import VideoList from '@/components/videoList/index'

export default {
  name: "recommend",
  components: {
    Swiper,
    VideoList
  },
  data() {
    return {
      indexBannerList: [],
      indexHotList:[],
      indexMovieList:[],
      indexTelevisionList:[],
    };
  },
  created() {
    this.getBannerList();
    this.getHotList();
    this.getMovieList();
    this.getTelevisionList();
  },
  methods: {
    async getBannerList() {
      let res = await indexApi.getBanner();
      if (res.code === 20000) {
        this.indexBannerList = res.data.data;
      } else {
        this.$toast(res.msg);
      }
    },

    async getHotList() {
      let res = await indexApi.getHot();
      if (res.code === 20000) {
        this.indexHotList = res.data.data;
      } else {
        this.$toast(res.msg);
      }
    },
    async getMovieList() {
      let res = await indexApi.getCategory(1);
      if (res.code === 20000) {
        this.indexMovieList = res.data.data;
      } else {
        this.$toast(res.msg);
      }
    },
    async getTelevisionList() {
      let res = await indexApi.getCategory(2);
      if (res.code === 20000) {
        this.indexTelevisionList = res.data.data;
      } else {
        this.$toast(res.msg);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.item {
  .title {
    padding: 8px 20px 0;
    display: flex;
    align-items: center;
  }
}
</style>